<template>
	<view class="container">
		
		<view class="tui-coupon-list">
               <view class="yui-box-tops">
				   <view>当前冻结共富收益</view>
				   <view class="yui-box-price">{{account.freeze_team_balance}}</view>
			   </view>
		</view>
		<view class="nine-box">
			<view class="nine-box-block">
				<view class="nine-box-name">一</view>
				<view class="nine-box-money">{{floorData['one']}}</view>
			</view>
			<view class="nine-box-block">
				<view class="nine-box-name">二</view>
				<view class="nine-box-money">{{floorData['two']}}</view>
			</view>
			<view class="nine-box-block">
				
				<view class="nine-box-name">三</view>
				<view class="nine-box-money">{{floorData['three']}}</view>
			</view>
			<view class="nine-box-block">
				
				<view class="nine-box-name">四</view>
				<view class="nine-box-money">{{floorData['four']}}</view>
			</view>
			<view class="nine-box-block">
				
				<view class="nine-box-name">五</view>
				<view class="nine-box-money">{{floorData['five']}}</view>
			</view>
			<view class="nine-box-block">
				<view class="nine-box-name">六</view>
				<view class="nine-box-money">{{floorData['six']}}</view>
			</view>
			<view class="nine-box-block">
				<view class="nine-box-name">七</view>
				<view class="nine-box-money">{{floorData['seven']}}</view>
			</view>
			<view class="nine-box-block">
				
				<view class="nine-box-name">八</view>
				<view class="nine-box-money">{{floorData['eight']}}</view>
			</view>
			<view class="nine-box-block">
				<view class="nine-box-name">九</view>
				<view class="nine-box-money">{{floorData['nine']}}</view>
				
			</view>

		</view>
        <view class="withdraw-txt">
        	说明：<br>
        	1，每一层会员购物产生的共富佣金，都显示在对应的格子里，格子的共富佣金为冻结状态。<br>
        	2，满足下面条件，冻结共富佣金将自动解冻，并转入你的共富佣金钱包里：<br>
        	a.会员确定收货<br>
        	b.你推荐了5个有效新会员<br>
        	c.你当月有消费记录，消费一笔就可拿一层奖励<br>
        	
        	3，九个格子里的冻结积分，月底清零。<br>
        </view>
		<!--加载loadding-->
	</view>
</template>

<script>
	export default {
		data() {
			return {

				currentTab: 0,
				pageIndex: 1,
				loadding: false,
				pullUpOn: true,
				accoutList: '',
				scrollTop: 0,
				account: "",
				floorData: 1,
			}
		},
		onShow() {
			this.tui.haslogin();
			if (this.tui.isLogin()) {
				this.init();
			}
		},
		methods: {

			init() {
				let token = this.tui.getToken();
				let account = this.tui.request('user', 'post', {
					token: token
				}, 1000, 1, '', 'userAccount');
				Promise.resolve(account).then((value) => {
					if (value.code == 200) {
						this.account = value.data;

					}
				})
				let accountrecords = this.tui.request('user', 'post', {
					token: token
				}, 1000, 1, '', 'floors');
				Promise.resolve(accountrecords).then((value) => {
					if (value.code == 200) {
						this.floorData = value.data;
					} 
				})
			},

		},

		onPullDownRefresh() {
			setTimeout(() => {
				this.pullUpOn = true
				uni.stopPullDownRefresh()
			}, 200);
		},
		onReachBottom() {

		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}

	.container {
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tui-tabs-fixed {
		position: relative !important;
		top: auto !important;
	}
    .withdraw-txt {
    	margin:0rpx 40rpx 40rpx 40rpx;
    	color: #8b8a83;
    	font-size: 26rpx;
    	line-height: 44rpx;
    }
	.nine-box {
		flex-wrap: wrap;
		display: flex;
		margin: 20rpx;
		justify-content: space-around;
	}
    .yui-box-top{
		
	}
	.yui-box-price{
		margin-top: 10rpx;
		font-size: 80rpx;
	}
	.nine-box-block {
		background: #F4F4F4;
		box-shadow: 0 10rpx 14rpx 0 rgba(191, 191, 191, 1);
	/* 	flex-flow:flex-direction;
		display: flex; */
		position: relative;
		width: 150rpx;
		height: 150rpx;
		border-radius: 10rpx;
		margin-bottom: 40rpx;
		text-align: center;
		padding: 20rpx;
		
	}
	.yui-box-tops{
		text-align: center;color:#fff;
		padding: 120rpx 200rpx;
	}
    .nine-box-money{
		font-size: 40rpx;
		margin-top: 52rpx;
		text-align: center;
	}
	.nine-box-name{
		color:#333333;

		font-size: bold;
		font-size: 30rpx;
		position: absolute;
		top:20rpx;
	}
	.tui-coupon {
		width: 100%;
		position: relative;
		box-sizing: border-box;
	}

	.coupon-top {
		color: #666;
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.coupon-top-title {
		text-align: left;
		padding-right: 20rpx;
		font-size: 26rpx;
	}

	.coupon-top-time {
		color: #b3b1b1;
		font-size: 16rpx;
	}

	.coupon-list {

		/* margin: 0 25rpx; */
		position: relative;
		margin-top: 40rpx;
		box-sizing: border-box;

	}

	.tui-coupon-list {
		width: 100%;
		padding: 0 25rpx;
		position: relative;
		background: url('/static/images/my/nine_bg.png') no-repeat;
		background-size: 100%;
		box-sizing: border-box;
	}

	.tui-coupon-banner {
		width: 100%;
	}

	.coupon-con {
		background: #fff;
	}

	.coupon-nums {
		color: #828080;
		font-size: 30rpx;
	}

	.coupon-red {
		color: #e41f19
	}

	.coupon-grey {
		color: #acacac
	}

	.coupon-nums-sp {
		font-size: 24rpx;
		color: #b3b1b1;
		line-height: 40rpx;
	}

	.tui-coupon-item {
		border-radius: 6rpx;
		width: 100%;

		position: relative;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		background: #fff;
		overflow: hidden;
	}

	.coupon-items {
		border-radius: 10rpx;
		padding: 20rpx;
		width: 100%;

		position: relative;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		background: #fff;
		overflow: hidden;
	}

	.coupon-floar {
		position: absolute;
		right: 0;
		top: 10rpx;
	}

	.tui-coupon-bg {
		width: 100%;
		height: 210rpx;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
	}

	.tui-coupon-sign {
		height: 110rpx;
		width: 110rpx;
		position: absolute;
		z-index: 9;
		top: -30rpx;
		right: 40rpx;
	}

	.coupon-items-left {
		color: #666;
		width: 70%;
		position: relative;
		z-index: 2;
		padding-left: 20rpx;
		display: flex;

		justify-content: flex-end;
		flex-direction: column;
		flex-shrink: 0;
	}

	.tui-coupon-item-left {
		width: 50%;
		height: 210rpx;
		position: relative;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		flex-shrink: 0;
	}

	.tui-coupon-price-box {
		display: flex;
		color: #e41f19;
		align-items: flex-end;
	}

	.tui-coupon-price-sign {
		font-size: 30rpx;
	}

	.tui-coupon-price {
		font-size: 50rpx;
		line-height: 50rpx;
		font-weight: bold;
	}

	.tui-price-small {
		font-size: 58rpx !important;
		line-height: 56rpx !important;
	}


	.tui-coupon-intro {
		background: #F7F7F7;
		padding: 8rpx 10rpx;
		font-size: 26rpx;
		line-height: 26rpx;
		font-weight: 400;
		color: #666;
		margin-top: 18rpx;
	}

	.coupon-items-right {
		flex: 1;
		position: relative;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-left: 24rpx;
		flex-direction: column;
		box-sizing: border-box;
		overflow: hidden;
	}

	.tui-coupon-item-right {
		flex: 1;
		height: 210rpx;
		position: relative;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-left: 24rpx;
		box-sizing: border-box;
		overflow: hidden;
	}

	.coupon-content {
		width: 82%;
		display: flex;
		font-size: 26rpx;
		flex-direction: column;
		justify-content: center;
	}

	.tui-coupon-title-box {
		display: flex;
		align-items: center;
	}

	.tui-coupon-btn {
		padding: 6rpx;
		background: #FFEBEB;
		color: #e41f19;
		font-size: 25rpx;
		line-height: 25rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		transform: scale(0.9);
		transform-origin: 0 center;
		border-radius: 4rpx;
		flex-shrink: 0;
	}

	.tui-color-grey {
		color: #888 !important;
	}

	.tui-bg-grey {
		background: #F0F0F0 !important;
		color: #888 !important;
	}

	.tui-coupon-title {
		width: 100%;
		font-size: 26rpx;
		color: #333;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.tui-coupon-rule {
		padding-top: 52rpx;
	}

	.tui-rule-box {
		display: flex;
		align-items: center;
		transform: scale(0.8);
		transform-origin: 0 100%;
	}

	.tui-padding-btm {
		padding-bottom: 6rpx;
	}

	.tui-coupon-circle {
		width: 8rpx;
		height: 8rpx;
		background: rgb(160, 160, 160);
		border-radius: 50%;
	}

	.tui-coupon-text {
		font-size: 28rpx;
		line-height: 28rpx;
		font-weight: 400;
		color: #666;
		padding-left: 8rpx;
		white-space: nowrap;
	}

	.tui-top20 {
		margin-top: 20rpx;
	}

	.tui-coupon-title {
		font-size: 28rpx;
		line-height: 28rpx;
	}


	.tui-coupon-radio {
		transform: scale(0.7);
		transform-origin: 100% center;
	}

	.tui-btn-box {
		position: absolute;
		width: 146rpx;
		height: 52rpx;
		right: 20rpx;
		bottom: 40rpx;
		z-index: 10;
	}

	/* #ifdef APP-PLUS || MP */
	.wx-radio-input {
		margin-right: 0 !important;
	}

	/* #endif */

	/* #ifdef H5 */
	>>>uni-radio .uni-radio-input {
		margin-right: 0 !important;
	}

	/* #endif */
</style>
